<script setup lang="ts">
import { useUserStore } from '@/stores'

const userStore = useUserStore()
</script>

<template>
  <view class="content" v-if="userStore.profile">
    <image class="logo" src="/static/logo/logo.png"></image>
    <view class="text-area">
      <text class="title">Hello {{ userStore.profile.mobile }}</text>
    </view>
  </view>
  <view class="content" v-else>
    <navigator url="/pages/login/login" hover-class="none">
      <image class="logo avatar gray" src="/static/logo/logo.png"></image>
    </navigator>
    <navigator url="/pages/login/login" hover-class="none">
      <view class="text-area">
        <text class="title">未登录</text>
        <view class="extra">
          <text class="tips">点击登录账号</text>
        </view>
      </view>
    </navigator>
  </view>
</template>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.avatar {
  border-radius: 50%;
  background-color: #eee;
}

.gray {
  filter: grayscale(100%);
}

.text-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .title {
    font-size: 36rpx;
  }

  .extra {
    display: flex;
    font-size: 20rpx;
  }

  .tips {
    font-size: 22rpx;
  }
}
</style>
